<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Суши</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>

<header class="header">
    <article class="container">
        <figure class="header-logo">
            <a href="#">
                <img src="assets/images/logo1.png" alt="Логотип" class="logo">
            </a>
        </figure>
        <nav class="menu">
            <ul>
                <li>
                    <a href="#product-items" class="menu-item">Суши</a>
                </li>
                <li>
                    <a href="#product-items" class="menu-item">Роллы</a>
                </li>
                <li>
                    <a href="#" class="menu-item">Доставка и оплата</a>
                </li>
                <li>
                    <a href="#" class="menu-item">Контакты</a>
                </li>
            </ul>
        </nav>
    </article>
</header>

<main class="main">
    <section class="main-content">
        <article class="container">
            <article class="content-info">
                <h1 class="info-title">
                    Отменные суши и роллы в <span class="title-color">Super Sushi</span>
                </h1>
                <article class="description">
                    <figure class="info-fresh">
                        <img src="assets/images/fresh.png" alt="Свежие cуши">
                        <figcaption class="info-text">Всегда свежие</figcaption>
                    </figure>
                    <figure class="info-assortment">
                        <img src="assets/images/assort.png" alt="Ассортимент">
                        <figcaption class="info-text">Широкий ассортимент</figcaption>
                    </figure>
                </article>
                <button class="button-info">Выбрать суши</button>
            </article>
            <figure class="main-image">
                <img src="assets/images/rolls.png" alt="Роллы">
            </figure>
        </article>
    </section>

    <section class="product-card">
        <article class="container">
            <h2 id="product-items" class="product-card-title">Выберите свои суши или роллы</h2>
            <article class="product-card-items">
                <article class="product-card-item">
                    <figure class="card-img">
                        <img src="assets/images/sushi-types/sushi_1.png" alt="Товар 1">
                        <figcaption class="card-name">Кайджи маки</figcaption>
                    </figure>
                    <p class="card-description">
                        Лосось, морской окунь, сливочный сыр, икра летучей рыбы, соус Терияки
                    </p>
                    <button class="button-card">В корзину</button>
                </article>
                <article class="product-card-item">
                    <figure class="card-img">
                        <img src="assets/images/sushi-types/sushi_2.png" alt="Товар 2">
                        <figcaption class="card-name">Бали маки</figcaption>
                    </figure>
                    <p class="card-description">
                        Копченый лосось, креветка в темпуре, манго, сливочный сыр, соус Спайси
                    </p>
                    <button class="button-card">В корзину</button>
                </article>
                <article class="product-card-item">
                    <figure class="card-img">
                        <img src="assets/images/sushi-types/sushi_3.png" alt="Товар 3">
                        <figcaption class="card-name">Бонито маки</figcaption>
                    </figure>
                    <p class="card-description">
                        Лосось, сливочный сыр, авокадо, стружка тунца
                    </p>
                    <button class="button-card">В корзину</button>
                </article>
                <article class="product-card-item">
                    <figure class="card-img">
                        <img src="assets/images/sushi-types/sushi_4.png" alt="Товар 4">
                        <figcaption class="card-name">Филадельфия маки</figcaption>
                    </figure>
                    <p class="card-description">
                        Лосось, сливочный сыр
                    </p>
                    <button class="button-card">В корзину</button>
                </article>
                <article class="product-card-item">
                    <figure class="card-img">
                        <img src="assets/images/sushi-types/sushi_5.png" alt="Товар 5">
                        <figcaption class="card-name">Киото маки</figcaption>
                    </figure>
                    <p class="card-description">
                        Угорь, авокадо, огурец, соус Унаги, кунжут белый
                    </p>
                    <button class="button-card">В корзину</button>
                </article>
                <article class="product-card-item">
                    <figure class="card-img">
                        <img src="assets/images/sushi-types/sushi_6.png" alt="Товар 6">
                        <figcaption class="card-name">Эби Калифорния маки</figcaption>
                    </figure>
                    <p class="card-description">
                        Креветка, авокадо, огурец, майонез, икра летучей рыбы
                    </p>
                    <button class="button-card">В корзину</button>
                </article>
                <article class="product-card-item">
                    <figure class="card-img">
                        <img src="assets/images/sushi-types/sushi_7.png" alt="Товар 7">
                        <figcaption class="card-name">Вакамэ маки</figcaption>
                    </figure>
                    <p class="card-description">
                        Лосось, сливочный сыр, водоросли маринованные, соус Ореховый, кунжут черный
                    </p>
                    <button class="button-card">В корзину</button>
                </article>
                <article class="product-card-item">
                    <figure class="card-img">
                        <img src="assets/images/sushi-types/sushi_8.png" alt="Товар 8">
                        <figcaption class="card-name">Эдо маки</figcaption>
                    </figure>
                    <p class="card-description">
                        Креветка в темпуре, сливочный сыр, огурец, соус Терияки, кунжут белый
                    </p>
                    <button class="button-card">В корзину</button>
                </article>
            </article>
        </article>
    </section>

    <section class="cook">
        <article class="container">
            <article class="cook-info">
                <h2 class="cook-title">Для вас готовит наш лучший сушист Иван</h2>
                <p class="cook-description">
                    Роллы и суши, которые вы у нас заказываете, делаются профессиональным сушистом с 5-летним стажем
                    Иваном Лазерко, который постоянно подтверждает и улучшает свою квалификацию, совершенствует
                    рецептуру и ассортимент нашего суши-бара, прелагая вам новые и интересные сочетания вкусов.
                </p>
                <h3 class="title-read-more">Читайте подробнее о наших суши и роллах</h3>
                <article class="link">
                    <a href="#">
                        <img src="assets/images/onigiri_mini.png" alt="Онигири" class="link-onigiri">
                    </a>
                    <a href="#">
                        <img src="assets/images/sushi_mini.png" alt="Суши" class="link-sushi">
                    </a>
                    <a href="#">
                        <img src="assets/images/nigiri_mini.png" alt="Нигири" class="link-nigiri">
                    </a>
                </article>
            </article>
            <figure class="cook-photo">
                <img src="assets/images/povar.png" alt="Повар">
            </figure>
        </article>
    </section>
</main>

<footer class="footer">
    <article class="container">
        <figure class="header-logo">
            <a href="#">
                <img src="assets/images/logo1.png" alt="Логотип" class="logo">
            </a>
        </figure>
        <p class="copyright">Все права защищены, 2020</p>
    </article>
</footer>

</body>
</html>